<template>
  <Popup
      :round="round"
      v-model="visible"
      :transition-appear="true"
      :close-on-popstate="true"
      overlay-class="layer_wrap"
      @click-overlay="handleClose"
      :safe-area-inset-bottom="true"
      :close-on-click-overlay="false"
  >
    <div class="report-result">
      <div class="report-result-top">
        <p class="name">{{ info.patientName }}</p>
        <p class="button" @click="handleClose()">关闭&nbsp;{{ `${time / 1000}` }}s</p>
      </div>
      <div class="patient-wrap">
        <div class="patient-inside">
          <div class="header flex-box">
            <span class="left flex-box-left">
              <img src="@/components/assets/images/design/1-12.webp"/>
            </span>
            <span class="middle flex-box-middle">{{ (info?.workerOffLineTips) || '请选择您要复诊的医生' }}</span>
            <span class="right flex-box-right">
              <img src="@/components/assets/images/design/1-12.webp"/>
            </span>
          </div>
          <div class="patient-inside-info" v-for="item in (info.doctorList)" :key="item.workerId">
            <div class="flex-box">
              <div class="item flex-box-left">
                <img :src="getDoctorPicture(item)" alt="医生头像">
              </div>
              <div class="item flex-box-right">
                <div class="name-level">
                  <span class="name">{{ item.workerName }}</span>
                  <span class="level">{{ item.workerTitle || '医师' }}</span>
                </div>
                <div class="dept">
                  <div class="desc">
                    {{ item.workerIntro }}
                  </div>
                  <div class="button-wrap">
                    <div class="bottom">
                      <div class="price" v-if="false">¥19.00</div>
                      <div class="button" @click="handleSelectDoctor(item)">复诊</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Popup>
</template>

<script>
import {Popup} from 'vant';

export default {
  name: 'ReportDoctor',

  componentName: "ReportDoctor",

  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    info: {
      type: Object,
      required: true
    },
  },

  components: {
    Popup,
  },

  data() {
    return {
      round: true,
      time: 60000,
      timer: null,

    }
  },

  computed: {
    getClassName() {
      let {state} = (this.info);
      switch (state) {
        case 0:
          return 'icon-fail';
        case 1:
          return 'icon-success';
        case 2:
          return true;
      }
    },

    // 获取医生头像
    getDoctorPicture() {
      return function (row) {
        let workerPicture = (row?.workerPicture);
        let header = '/tpleditor/resource/assets/images/header.png';
        if (workerPicture) {
          return workerPicture
        } else {
          return header;
        }
      }
    },

  },

  mounted() {
    console.log('init')
  },

  methods: {
    handleClose() {
      this.$emit('handleCancel')
      this.$emit('handle-cancel')
      clearInterval(this.timer);
    },

    // 选择医生父级的操作
    handleSelectDoctor(row) {
      this.$emit('handleSure', row)
      this.$emit('handle-sure', row)
      this.handleClose();
    }
  },

  watch: {
    visible: {
      handler: function (val) {
        const self = this;
        if (val) {
          self.time = (self.info.time) * 1000;
          self.timer = setInterval(() => {
            self.time = (self.time - 1000);
            if ((self.time) === 0) {
              self.handleClose();
              clearInterval(self.timer)
            }
            console.log('1关闭倒计时')
          }, 1000)
        } else {
          clearInterval(self.timer)
          console.log('2关闭倒计时')
        }
      },
      deep: true,
      immediate: true
    }
  },

}
</script>

<style lang="scss" scoped>
@import "./assets/style";
</style>
